<template>
  <div class="activity-href">
    <l-r-content-index>
      <template #side-content>
        <LeftTree ref="LeftTreeRef" :treeData="treeData" :show-little-point="false" :disableSelect="false"
          @getTreeNodeId="clickTreeNode"></LeftTree>
      </template>

      <div class="content">
        <search-bar>
          <template #normal>
            <el-form-item label="商品名称">
              <el-input v-model="form.name" clearable placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <goods-supplier-filter url="/mall/admin/product/getStore2"
              @change="({ selected }) => form.storeId = selected">
            </goods-supplier-filter>
          </template>
        </search-bar>

        <div class="list">
          <div class="card" :class="{
            'card-active': checkActive(item),
            'card-selected': item.id === selectedCard?.id
          }" v-for="item in list" @click="clickCard(item)">
            <div class="img-wrapper">
              <img class="img" :src="item.thumbnailUrl" />
            </div>
            <div class="text">
              <div class="line name">{{ item.name }}</div>
              <div class="line price">
                {{ item.priceRange }}
              </div>
              <div class="line stock">剩余库存：{{ item.stock }}</div>
            </div>
          </div>
        </div>

        <div class="pager">
          <el-pagination v-model:current-page="page.currentPage" layout="total, prev, pager, next"
            :page-size="page.showCount" :total="page.total" />
        </div>
      </div>
    </l-r-content-index>
  </div>
</template>

<script setup lang="ts">
// 获取左侧的树结构
import { activityPageApi, queryQuestionGroupTreeApi } from "@/api/activity";
import { debounce } from "@/utils";
import moment from "moment";
import { useGetGoodsCategory } from "@/views/pointsMall/compositions/useGetGoodsCategory";
import { getMallGoodsPage } from "@/api/pointsMall";
import { useMallConfig } from "@/views/pointsMall/compositions/useMallConfig";
import { IGoodsPageRow } from "@/api/modules/pointsMall";
import { Ref } from "vue";
import Background from "@/views/activity/activityManage/components/business/Background.vue";
import { ILink } from "@/components/hrefSelector/types";

const props = defineProps<{
  modelValue: ILink
}>()

const emits = defineEmits<{
  (e: "click", value: any): void
}>()

const { goodsCateList, getGoodsCate } = useGetGoodsCategory()
const { mallConfig } = useMallConfig()


const treeData = ref([] as any)
const getCate = async () => {
  await getGoodsCate();
  treeData.value = [
    {
      id: "",
      name: "全部",
      children: [],
    },
  ].concat(goodsCateList.value);
};

const page = reactive({
  currentPage: 1,
  showCount: 10,
  total: 0,
})

const form = reactive({
  mallId: mallConfig.value.id,
  onlineStatus: 1,
  withProducts: false,
  name: "",
  storeId: null,
  categoryId: null,
})
const list: Ref<IGoodsPageRow[]> = ref([])
const getList = async () => {
  const rs = await getMallGoodsPage({
    ...form,
    ...page
  })
  if (rs.code === 200) {
    list.value = rs.payload ?? []
    page.total = rs.page?.totalResult ?? 0;
  }
}

const debouncedSearch = debounce(() => {
  page.currentPage = 1;
  getList()
}, 700, false)

watch(() => form, debouncedSearch, {
  deep: true
})

const clickTreeNode = (node: any, data: any) => {
  form.categoryId = node.id;
}

const selectedCard = ref();
const clickCard = (item: any) => {
  selectedCard.value = item
  emits("click", item);
}

const formatTime = (value: number) => {
  return value ? moment(value).format("YYYY.MM.DD") : ""
}

const checkActive = (item: IGoodsPageRow) => {
  return item.name === props.modelValue?.urlName
}

onMounted(() => {
  getCate();
  getList();
})

</script>

<style scoped lang="scss">
@use "../styles/index.scss";

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  //height: 190px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;

  .img-wrapper {
    width: 120px;
    height: 80px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F0f0f0;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;

    .img {
      max-width: 120px;
      max-height: 80px;
    }
  }

  .text {
    .line {
      margin-bottom: 5px;
    }

    .name {
      width: 120px;
      word-break: keep-all;
      white-space: nowrap;
      font-size: 14px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }

    .price {
      color: var(--el-color-primary);
    }
  }
}

.card:hover {
  background: #EEE;
}
</style>
